<script setup>
import { ref } from 'vue';
import { ElAlert } from 'element-plus';

const isAlertVisible = ref(false);
const alertMessage = ref('');
const alertType = ref('');
const msg=ref('message')
const showMessage = (type,msg) => {
  switch (type) {
    case 'success':
      alertMessage.value = msg;
      alertType.value = 'success';
      break;
    case 'info':
      alertMessage.value = msg;
      alertType.value = 'info';
      break;
    case 'warning':
      alertMessage.value = msg;
      alertType.value = 'warning';
      break;
    case 'error':
      alertMessage.value = msg;
      alertType.value = 'error';
      break;
    default:
      alertMessage.value = '';
      alertType.value = '';
  }
  
  isAlertVisible.value = true;
  setTimeout(() => {
    hideMessage();
  }, 1500); // 等待 500 毫秒后自动隐藏 alert
};

const hideMessage = () => {
  isAlertVisible.value = false;
};
</script>

<template>
  <div >
    <button @click="showMessage('success',msg)">显示成功弹窗</button>
    <button @click="showMessage('info',msg)">显示默认弹窗</button>
    <button @click="showMessage('warning',msg)">显示警告弹窗</button>
    <button @click="showMessage('error',msg)">显示错误弹窗</button>

    <el-alert v-if="isAlertVisible" :title="alertMessage" :type="alertType" center show-icon @close="hideMessage" />
  </div>
</template>

<style scoped>
.el-alert {
  width: 200px;
  margin: auto;
  
}

.el-alert:first-child {
  margin: 0;
}
</style>